<template>
  <BaseDialog
    ref="dialogRef"
    title="分配菜单"
    @dialogSubmit="dialogSubmit"
  >
    <template #dialog_body style="height:50vh;overflow: auto;">
      <SysPermissionTree
        ref="treeRef"
        v-model="form['parentId']"
        :showCheckbox="true"
      />
    </template>
  </BaseDialog>
</template>

<script lang="ts" setup>
import BaseDialog from '@/components/base/dialog/BaseDialog.vue';
import SysPermissionTree from '@/components/uem/SysPermissionTree.vue';
import {
  defineExpose, defineProps, getCurrentInstance, ref,
} from 'vue';
import { Role } from '@/types/interface/auth_interface';
import { ElMessage, ElTree } from 'element-plus';
import { TableData } from '@/types/interface/base_interface';

// 接收父组件传递过来的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  loadTableList:()=>void, // 重新加载表格
}
const props = defineProps<Props>();

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
const dialogRef = ref(); // 表单ref对象
// 定义树形菜单的ref对象
const treeRef = ref();
// 表单对象
const form = ref<Role>();
let formInit:Role; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const openDialog = async (role: Role) => {
  formInit = { ...role }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...role };
  // 打开对话框，先初始化树形菜单
  dialogRef.value!.openDialog();
  // 获取树形菜单初始值
  const responseData = await new proxy.$Request(`${proxy.$urls.API_URL_BACKSTAGE_ROLE_PERMISSION_MANAGE}/${form.value.id}`).get();
  if (responseData.success) {
    // 设置该角色的菜单初始值
    treeRef.value!.setCheckedKeys(responseData.data);
  }
};
// 提交树形菜单数据
// 当点击对话框提交按钮
const dialogSubmit = async () => {
  // 将tree中包含半选中节点在内的菜单封装在一起
  const formObject = {
    roleId: form.value!.id,
    permissionIds: [...treeRef.value!.getCheckedKeys(true)], // 选中的节点，只返回子节点（即所有包含子节点的节点不会被获取）
    // permissionIds: [...treeRef.value!.getCheckedKeys(), ...treeRef.value!.getHalfCheckedKeys()], // 将选中和版选中的节点进行合并
  };
  const resData = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_ROLE_PERMISSION_MANAGE, JSON.stringify(formObject)).put();
  if (resData.success) {
    ElMessage.success('保存成功');
    // 刷新表格
    props.loadTableList();
    // 关闭窗口
    dialogRef.value.closeDialog();
  }
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
